<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pegi eighteen</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/max.css">
    <link rel="stylesheet" href="./css/secondary.css">
    <link rel="stylesheet" href="./css/min.css">
    <link rel="stylesheet" href="./icon/iconfont.css">
    <link rel="stylesheet" href="./css/htmleaf-demo.css">
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/font.css">
    <style>
        body {
            background-image: url(./image/blackwidow.jpg);
            background-repeat: no-repeat;
        }
    </style>
</head>

<body>
    <!-- 欢迎页 -->
    <div class="htmleaf-containers">
        <div>
            <p class="ex1">PEGI</p>
            <p class="ex2">EIGHTEEN</p>
            <p class="desc">- Pegi EighTeen-</p>
        </div>
    </div>
    <!-- 导航栏 -->
    <nav class="clearfix">
        <div class="banxin ">
            <ul class="clearfix">
                <li><a href="index.html">图片</a></li>
                <li><a href="index.html"><span class="iconfont icon-shouye"></span>首页</a></li>
                <li><a href="Design.html"><span class="iconfont icon-sheji"></span>设计</a></li>
                <li><a href=""><span class="iconfont icon-guanyu"></span>关于</a></li>
                <li><a href=""><span class="iconfont icon-iconset0120"></span>文档</a></li>
                <li><a href=""><span class="iconfont icon-mail"></span>Mail</a></li>
            </ul>
        </div>
    </nav>

    <div class="htmleaf-contentc">
        <p class="font1">艺术源于生活，高于生活</p>
        <p class="font2">Arts is coming from life, above life and away from life</p>
        <p class="descs">- PEGI EIGHTEEN-</p>
    </div>
</body>

</html>
<script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
<script src="./js/stopExecutionOnTimeout.js"></script>
<script src="js/textyleF.min.js"></script>
<script src="./js/vidbg.js"></script>
<script src="./js/font.min.js"></script>
<script>
    window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')
</script>
<!-- 欢迎页jQuery -->
<script>
    $(window).on('load', function() {
        // https://cdn2.unrealengine.com/Unreal+Engine%2Fhome%2Femergence-cd22a9c390b04aa01948491622ddfa5e91e650e3.mp4
        //视频加载
        jQuery(function($) {
            $('body').vidbg({
                'mp4': './video/liyuepv_1592450428_5720.mp4',
                'webm': './video/liyuepv_1592450428_5720.mp4',
                'poster': './video/liyuepv_1592450428_5720.mp4',
            }, {
                // Options
                muted: true,
                loop: true,
                overlay: true,
            });
        });
        $('.ex1').textyleF();
        $('.ex2').textyleF({
            duration: 2000,
            delay: 200,
            easing: 'cubic-bezier(0.785, 0.135, 0.15, 0.86)',
            callback: function() {
                $(this).css({
                    color: '#fff',
                    transition: '1s',
                });
                $('.desc').css('opacity', 1);
            }
        });
        setTimeout(function() {
            $(".htmleaf-containers").slideUp(4000)
        }, 5000)


        setTimeout(function() {
            $('.font1').textyle();
            //you can select options or add callback
            $('.font2').textyle({
                duration: 400,
                delay: 100,
                easing: 'swing',
                callback: function() {
                    $(this).css({
                        color: 'coral',
                        transition: '1s',
                    });
                    $('.descs').css('opacity', 1);
                }
            });
        }, 9000)
    });
</script>